<template>
  <div class="main">
    <div class="cardTab">
      <el-radio-group v-model="tab" size="large">
        
        <el-radio-button v-for="(item, index) in tabList" :key="index" :label="item.label" :value="item.label" />
      </el-radio-group>
    </div>

    <materialPool v-if="tab == '物料客池'"></materialPool>
    <conversionPool v-if="tab == '转化客池'"></conversionPool>
    <highseasPool v-if="tab == '公海客池'"></highseasPool>
    <discardPool v-if="tab == '废弃客池'"></discardPool>
  </div>
</template>

<script setup>
import materialPool from "./components/materialPool/index.vue";
import conversionPool from "./components/conversionPool/index.vue";
import highseasPool from "./components/highseasPool/index.vue";
import discardPool from "./components/discardPool/index.vue";
import { ref, reactive, computed } from "vue";

import { useUserStoreHook } from "@/store/modules/user";

const tabList = ref([])
const tab = ref()

/** 页面元素权限 */
const auth_element = computed(() => {
  return useUserStoreHook()?.auth_element;
});

/** 筛选完-页面元素权限 */
if (auth_element.value) {
  // 查询 onpage 为 "/customerManagement/data/index" 的所有数据
  const homeData = Object.entries(JSON.parse(auth_element.value)).filter(([key, value]) => value.onpage === "/customerManagement/data/index");
  // 转换为对象形式
  const homeDataObj = Object.fromEntries(homeData);
  if (homeDataObj.cd_tab) {
    let childs = homeDataObj.cd_tab.childs || []
    let filterTableList = []
    for (let i = 0; i < childs.length; i++) {
      let item = { label: "", value: childs[i] }
      if (childs[i] == 'cd_wl') item.label = "物料客池"
      if (childs[i] == 'cd_zh') item.label = "转化客池"
      if (childs[i] == 'cd_gh') item.label = "公海客池"
      if (childs[i] == 'cd_fq') item.label = "废弃客池"
      filterTableList.push(item)
    }
    if (filterTableList.length) {
      tabList.value = filterTableList;
      tab.value = filterTableList[0].label;
    }
  }
}
</script>

<style scoped lang="scss">
.main-content {
  margin: 0 !important;
}
.cardTab {
  padding: 16px;
  background-color: #fff;
}
</style>
